<template>
  <view class="container">
    <!-- 选择图片按钮 -->
    <button @click="chooseAndPreviewImage">选择并预览图片</button>
    <!-- 显示选中的图片 -->
    <image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="preview-image"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' // 存储选中图片的临时路径
    }
  },
  methods: {
    chooseAndPreviewImage() {
      // 1. 选择本地图片
      uni.chooseImage({
        count: 1, // 仅选择1张图片
        sizeType: ['compressed'], // 选择压缩后的图片（也可加 'original' 选原图）
        sourceType: ['album'], // 仅从相册选择（也可加 'camera' 允许相机拍摄）
        success: (res) => {
          const tempFilePaths = res.tempFilePaths[0]; // 选中图片的临时路径
          
          // 2. 预览图片
          uni.previewImage({
            current: tempFilePaths, // 当前预览的图片路径
            urls: [tempFilePaths] // 需要预览的图片路径数组
          });
          
          // 3. 将图片路径赋值，显示到界面上
          this.imageUrl = tempFilePaths;
        }
      });
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}
.preview-image {
  width: 600rpx;
  height: 400rpx;
  margin-top: 30rpx;
}
</style>
